//财务管理-2差异明细-1人工处理
import '../Finance.css'
import { useRef , useEffect } from 'react';
import { NavLink , useSearchParams } from 'react-router-dom'
import { Table , Button , Form , Select , Input , Message , Upload } from '@arco-design/web-react';
const TextArea = Input.TextArea;
const columns = [{
  title: '交易完成时间',
  dataIndex: 'time',
  key:'time'
},
{
  title: '对账类型',
  dataIndex: 'type1',
  key:'type1'
},
{
  title: '交易类型',
  dataIndex: 'type2',
  key:'type2'
},
{
  title: '差错类型',
  key:'type3',
  render:  (_, record) =>{
    return <span className='orange'>{record.type3}</span>
  }
},
{
  title: (<span>支付订单号<br/>商户订单号</span>),
  key:'id',
  render: (_, record) => (
    <span>
      <div>{record.id[0]}</div>
      <div>{record.id[1]}</div>
    </span>
  )
},
{
  title: (<span>支付订单金额<br/>商户订单金额</span>),
  key:'money',
  render: (_, record) => (
    <span className='orange'>
      <div>{record.money[0]}</div>
      <div>{record.money[1]}</div>
    </span>
  )
},
{
  title: '处理状态',
  key:'state',
  render: (_,record) => (<span className='red'>{record.state?'已处理':'未处理'}</span>),
}];
const data = [{
  time: '2019-12-01',
  type1: '支付宝',
  type2: '消费',
  type3:'支付宝单边',
  id:['PAY2938475628374625','123456789'],
  money:['35.00 元','00.00 元'],
  state:0
}];

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};
const noLabelLayout = {
  wrapperCol: {
    span: 17,
    offset: 7,
  },
};
const defaultFileList = [
  {
    uid: '-1',
    name: 'ice.png',
    url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
  },
  {
    status: 'error',
    uid: '-2',
    percent: 0,
    response: '上传错误提示',
    name: 'cat.png',
    url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
  },
  {
    uid: '-2',
    name: 'light.png',
    url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
  },
];

const Handle = () => {
  const [search,setSearch]=useSearchParams();
  console.log(search.get('batchNumber'),'跳转获取值');

  const formRef = useRef();
  useEffect(() => {
    formRef.current.setFieldsValue({
      rate: 5,
    });
  }, []);

  const onValuesChange = (changeValue, values) => {
    console.log('onValuesChange: ', changeValue, values);
  };
  return (
    <div className='bigBox'>
      <div className='title'>
        <div>
          <span>财务管理</span>
          <span>  /  </span>
          <span>差异明细</span>
          <span>  /  </span>
          <span className='bold'>人工处理</span>
        </div>
        <h2>人工处理</h2>
      </div>
      <div className='content'>
        <div className='c_msg'>
          <Table columns={columns} data={data} pagination={false}/>
        </div>
        <div className='c_table' style={{ maxWidth: 650 }}>
          <Form
            ref={formRef}
            {...formItemLayout}
            size='default'
            initialValues={{
              id: 'PAY2938475628374625',
              money:'35.00'
            }}
            onValuesChange={onValuesChange}
            scrollToFirstError
          >
            <FormItem label='支付订单号：' field='id' disabled>
              <Input/>
            </FormItem>
            <FormItem label='支付订金额：' field='money' disabled>
              <Input />
            </FormItem>
            <FormItem label='商户订单号：' field='id2' rules={[{ required: true }]}>
              <Input className='whiteBg' placeholder='请输入...' />
            </FormItem>
            <FormItem label='商户订单金额：' field='money2' rules={[{ required: true }]}>
              <Input className='whiteBg' placeholder='请输入...' />
            </FormItem>
            <FormItem label='处理方式：' field='type' rules={[{ required: true }]}>
              <Select
                placeholder='请选择...'
                options={[
                  {
                    label: '处理A',
                    value: 0,
                  },
                  {
                    label: '处理B',
                    value: 1,
                  },
                  {
                    label: '处理C',
                    value: 2,
                  },
                ]}
              />
            </FormItem>
            <FormItem label='处理原因反馈：' field='msg'>
                <TextArea className='whiteBg' placeholder='请输入备注...' style={{ minHeight: 64, width: 460 }} />
            </FormItem>
            <Form.Item label='上传附件：' field='upload'>
              <Upload action='/' multiple defaultFileList={defaultFileList}/>
            </Form.Item>
            <FormItem {...noLabelLayout}>
              <Button
                onClick={async () => {
                  if (formRef.current) {
                    try {
                      await formRef.current.validate();
                      Message.info('提交成功');
                    } catch (_) {
                      console.log(formRef.current.getFieldsError());
                      Message.error('提交失败，请检查字段');
                    }
                  }
                }}
                type='primary'
                size='large'
                style={{ marginRight: 24 }}
              >
                提交
              </Button>
              <NavLink to='/home/finance/deta'><Button type='outline' status='warning'size='large' >返回</Button></NavLink>
            </FormItem>
          </Form>
        </div>  
      </div>
    </div>
  )
}
export default Handle
